<template>
	<cusHeaderVue title="这里是首页" bgColor="#4295AB"></cusHeaderVue>
	<up-input
		:customStyle="{
			position: 'fixed',
			top: '128rpx',
			width: '100vw',
			zIndex: 1000,
			background: '#ffffff'
		}"
	    :placeholder="$t('inputPlaceholder')"
	    border="surround"
	  ></up-input>
	<view class="content">
		<button @click="changeLanguage">{{$t('changeLanguage')}}</button>
		<!-- <image class="logo" src="/static/logo.png"></image> -->

		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<image class="swiper-image" src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<icon type="warn" size="23"></icon>
		<rich-text :nodes="title"></rich-text>
		<navigator url="/pages/my/my">{{$t('toMyPage')}}</navigator>
		<button @click="goMy">js跳转我的页面</button>

		<button @click="saveToken">存token</button>
		<button @click="getToken">取出token</button>
		<map name=""></map>
		<up-icon name="photo"></up-icon>
		<!-- tab切换 -->
		<up-tabs :list="tabList" :current="curTab" @click="handleChangeTab"></up-tabs>
		<view class="" v-if="curTab===0">
			<!-- house-list整个列表的容器 -->
			<view class="house-list">
				<!-- list-item代表没一项 -->
				<view class="list-item" v-for="item in houseList" :key="item.id">
					<image :src="item.housepic" mode=""></image>
					<view class="house-info">
						<view @click="goDetail(item.id)" class="house-title">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="curTab === 1">
			推荐
		</view>
		<view class="" v-if="curTab === 2">
			电影
		</view>
	</view>
	<!-- <custTabVue></custTabVue> -->
	<diyTabVue></diyTabVue>
</template>

<script setup>
	// import custTabVue from '../../components/cust-tab/cust-tab.vue';
	import diyTabVue from '../../components/diy-tab/diy-tab.vue';
	import cusHeaderVue from '../../components/cus-header/cus-header.vue';
	import {
		ref
	} from 'vue'
import { GET_HOUSE_LIST } from '../../api/house';
import { useI18n } from 'vue-i18n';
const houseList = ref([])
	const {locale} = useI18n()
	const indicatorDots = ref(false)
	const autoplay = ref(false)
	const interval = ref(3000)
	const duration = ref(1000)
	const curTab = ref(1) //用来记录当前展示的是哪一个tab
	const tabList = ref([  
	    { name: '关注' },  
	    { name: '推荐' },  
	    { name: '电影' },  
	    { name: '科技' },  
	    { name: '音乐' },  
	    { name: '美食' },  
	    { name: '文化' },  
	    { name: '财经' },  
	    { name: '手工' }  
	]);
	
	const changeLanguage = () => {
		console.log('当前语言标识'+locale.value)
		locale.value = locale.value === 'zh' ? 'en' : 'zh'
		uni.setStorageSync('lang', locale.value)
		// if(locale.value === 'en') {
		// 	locale.value = 'zh'
		// } else {
		// 	locale.value = 'en'
		// }
	}
	const handleChangeTab = (value) => {
		console.log(value)
		curTab.value = value.index
	}
	const goDetail = (id) => {
		// 传参
		uni.navigateTo({
			url:'/pages/detail/detail?id='+id + '&dataId=' +id
			// /pages/detail/detail?id=19&dataId=19
		})
	}
	const title = ref('<img src="/static/logo.png" />')
	// 键 - 值、key- value
	const obj = {
		name: '张家兴',
		age: 20
	}

	const goMy = () => {
		console.log(123)
		uni.navigateTo({
			url: '/pages/my/my'
		})
	}
	const saveToken = () => {
		const token = '123'
		uni.setStorageSync('token', token)
	}
	const getToken = () => {
		console.log(uni.getStorageSync('token'))
	}
	const getHouse = () => {
		console.log(123)
		GET_HOUSE_LIST().then(res =>{
			console.log(res) // 直接拿到想要的数据列表,而不用通过.data.data去拿
			houseList.value = res
		})
	}
	getHouse()
</script>

<style>
	.content{
		padding: 200rpx 0;
	}
	.swiper-image{
		height: 300rpx;
		width: 100vw;
	}
	.input-search{
		position: fixed;
		top: 100rpx;
	}
	.list-item{
		background: #87c1ed;
		margin-bottom: 20rpx;
	}
</style>